@import '@/styles/variables.scss';

<template>
  <div class="page-container contact-container">
    <!-- Banner组件 -->
    <page-banner
      title="联系我们"
      description="随时与我们取得联系，我们期待为您提供帮助"
      background-image="/images/contact-banner.jpg"
      background-color="#2c5282"
    />
    
    <!-- 联系内容 -->
    <div class="contact-content">
      <el-row :gutter="30">
        <el-col :span="12">
          <contact-info />
        </el-col>
        <el-col :span="12">
          <contact-form />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import ContactInfo from './components/ContactInfo.vue'
import ContactForm from './components/ContactForm.vue'
import PageBanner from '@/components/PageBanner.vue'
</script>

<style lang="scss" scoped>
.contact-container {
  position: relative;
  padding: 0 0 80px;
  min-height: 100vh;
  background-color: #f8f9fa;
  
  .page-header {
    position: relative;
    padding: 100px 0;
    text-align: center;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
    color: #fff;
    margin-bottom: 60px;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100px;
      background: linear-gradient(to bottom right, transparent 49.5%, #f8f9fa 50%);
    }
    
    .page-title {
      font-size: 48px;
      font-weight: 800;
      margin-bottom: 20px;
      position: relative;
      display: inline-block;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 2px;
      }
    }
    
    .page-desc {
      font-size: 18px;
      max-width: 600px;
      margin: 0 auto;
      opacity: 0.9;
    }
  }
  
  .contact-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 60px;
    position: relative;
    z-index: 1;
  }
  
  @media (max-width: 768px) {
    .page-header {
      padding: 60px 0;
      
      &::after {
        height: 60px;
      }
      
      .page-title {
        font-size: 36px;
      }
      
      .page-desc {
        font-size: 16px;
        padding: 0 20px;
      }
    }
    
    .contact-content {
      padding: 0 20px 40px;
      
      .el-col {
        width: 100%;
        margin-bottom: 30px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>